<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			.red{
				color: red;
			}
			.thin{
				font-weight: 200;
			}
			.italic{
				font-style: italic;
			}
			.active{
				letter-spacing: 0.5em;/* 间距 */
			}
		</style>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <h1 class="red thin">这是一个很大很大的H1，吃饱了打那么多字</h1> -->
			<h1 class="red thin">这是一个很大很大的H1，吃饱了打那么多字</h1>
			<!-- 第一种：使用方式，直接传递一个数组，class用v-bind数据绑定 -->
			<h1 :class="{red:true,italic:true}">这是一个很大很大的H1，吃饱了打那么多字</h1>
			<!-- 第二种：使用三元表达式 -->
			<h1 :class="['red','italic',flag?'active':'']">这是一个很大很大的H1，吃饱了打那么多字</h1>
			<!-- 第三种：数组中嵌套对象形式，三元比较麻烦 -->
			<h1 :class="['red','italic',{'active':flag}]">这是一个很大很大的H1，吃饱了打那么多字</h1>
			<!-- 第四种：直接使用对象,属性可不带引号  -->
			<h1 :class="classObj">这是一个很大很大的H1，吃饱了打那么多字</h1>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					flag:true,
					classObj:{red:true , thin:false , active:true}
				},
				methods:{
					
				}
			});
			
		</script>
	</body>
</html>
